<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getGoodsList } from "../../../api"; //引入 axios 接口
//定义轮播图数据对象
const carouselList = ref();
//获得所有轮播图
async function getMenuList() {
  const res = await getGoodsList();
  carouselList.value = res.data.data.filter(
    (value: any) => value.category_id == 38
  );
}
//页面组件加载完成
onMounted(() => {
  getMenuList();
});
</script>

<template>
  <section>
    <el-carousel motion-blur height="350px">
      <el-carousel motion-blur height="350px">
        <el-carousel-item v-for="item in carouselList">
          <img :src="item.picture"
        /></el-carousel-item>
      </el-carousel>
    </el-carousel>
  </section>
</template>
<style scoped>
section,
section img {
  width: 1000px;
  height: 350px;
}
</style>
